<template>
	<view class="distri-top">
		<view class="wrap">
			<view class="height-100"></view>
			<view class="dr-t-1">
				<view class="flex m-infos line-bot">
					<view class="flex-1">
						<view class="fs-32 fc-33">{{userInfo.nickname}}</view>
						<view class="fs-28 fc-99">推荐人：<text>{{(inviteInfo.inviter && inviteInfo.inviter.nickname) || '平台'}}</text></view>
					</view>
					<view class="tj-pic">
						<image :src="userInfo.avatar"></image>
					</view>
				</view>
				<view class="flex ext-box">
					<view class="flex-1">
						<view class="fc-ff">可提现<text class="mar-left-5">{{cashBackInfo.cashBackBalance || 0}}元</text></view>
						<view class="fc-ff">待提现<text class="mar-left-5">{{cashBackInfo.waitWithDrawalTotal || 0}}元</text></view>
					</view>
					<view class="extract-btn text-tc" @click="goWidthdrawal()">去提现</view>
				</view>
				<view class="flex jcsb mar-top-10 mar-left-30 mar-right-30">
					<view class="fc-33">已提现金额</view>
					<view class="fc-33">{{cashBackInfo.withDrawalTotal || 0}}元</view>
				</view>
			</view>
			<view class="mar-top-25 distr-main flex">
				<view class="distr-item" v-for="(item,index) in TypeList" :key="index" @click="toModule(index)">
					<view class="iconstyle">
						<image :src="item.src"></image>
					</view>
					<text class="dis-block text-tc">{{item.name}}</text>
				</view>				
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex"
export default {
	data() {
		return {
			inviteInfo: {},
			cashBackInfo: {},
			TypeList:[
				{
					name:'提现明细',
					src:this.$mConfig.imgSrcUrl+'icon/cy4.png'
				},
				{
					name:'分销订单',
					src:this.$mConfig.imgSrcUrl+'icon/cy4.png'
				},
				{
					name:'我的团队',
					src:this.$mConfig.imgSrcUrl+'icon/cy4.png'
				},
				{
					name:'推广二维码',
					src:this.$mConfig.imgSrcUrl+'icon/cy4.png'
				}
			]
		}
	},
	computed:{
		...mapState(["userInfo"])
	},
	onShow() {
		if(!this.userInfo || !this.userInfo.id) {
			this.$store.dispatch('reLogin');
			return;
		}
		this.getCashBackInfo()
	},
	methods:{
		//去提现
		goWidthdrawal(){
			uni.navigateTo({
				url:'/pages/user/person/distribut/Withdrawal'
			})
		},
		getInviterInfo() {
			this.$apis.getInviteInfo(this.userInfo.id).then(res=>{
				this.inviteInfo = res.data;
			})
		},
		getCashBackInfo() {
			var param = {
				userId: this.userInfo.id
			}
			this.$apis.cashBackInfo(param)
			.then(res=>{
				console.log("返回的记录",res);
				this.cashBackInfo = res.data;
			})
		},
		//跳转页面
		toModule(index){
			if(index == 0){
				uni.navigateTo({
					url:'/pages/user/person/distribut/withdrawal_record'
				})				
			}else if(index == 1){
				uni.navigateTo({
					url:'/pages/user/person/distribut/order'
				})				
			}else if(index == 2){
				uni.navigateTo({
					url:'/pages/user/person/distribut/teams'
				})
			} else if(index == 3){
				uni.navigateTo({
					url:'/pages/user/person/distribut/poster'
				})
			}
		}
	}
}
</script>

<style lang="scss">
	.distri-top{
		background: #84C0F4;
		height: 205rpx;
		.height-100{
			height: 100rpx;
		}
		.dr-t-1{
			background: #fff;
			border-radius: 8rpx;
			box-shadow: 0px 0px 6px #d8d8d8;
			padding: 15rpx 0;
			.m-infos{				
				height: 106rpx;
				padding: 30rpx;
				.tj-pic{
					width: 148rpx;
					height: 148rpx;
					display: block;
					position: relative;
					top: -38px;
					border-radius: 50%;
					border: 6rpx solid #fff;
					image{
						width: 148rpx;
						height: 148rpx;
						border-radius: 50%;
						line-height: 148rpx;
					}
				}
			}
			.ext-box{
				background: #929aff;
				border-radius: 8rpx;
				padding: 30rpx;
				align-items: center;
				margin: 20rpx 30rpx;
				.extract-btn{
					background: #fff;
					height: 52rpx;
					line-height: 52rpx;
					padding: 0 24rpx;
					border-radius: 72rpx;
					color: #929aff;
				
				}
			}
			.line-bot{
				border-bottom: 1px solid #EEEEEE;
			}
		}
		.distr-main{
			background: #fff;
			border-radius: 8rpx;
			box-shadow: 0px 0px 6px #d8d8d8;
			padding: 54rpx 0 22rpx;
			.distr-item{
				width: 33.3%;
				margin-bottom: 20rpx;
				.iconstyle{
					width: 60rpx;
					height: 60rpx;
					display: block;
					margin: 0 auto;
					image{
						width: 60rpx;
						height: 60rpx;
						display: block;
					}
				}
			}
		}
	}
</style>
